<!-- 
无法滑动到底部
 最后一条消息被消息发送框遮挡
 -->

<template>
	<view class="chat-container">
		<!-- 聊天消息区域 -->
		<scroll-view class="chat-messages" scroll-y :scroll-top="scrollTop" @scroll="onScroll">
			<!-- 使用 v-for 统一处理，避免重复循环 -->
			<view class="message-item" :class="msg.isMe ? 'my-message' : 'other-message'"
				v-for="(msg, index) in messages" :key="index">
				<view class="message-content">
					<view class="message-bubble">
						{{ msg.content }}
					</view>
					<view class="message-time">{{ msg.time }}</view>
				</view>
			</view>
		</scroll-view>

		<!-- 输入区域 -->
		<view class="input-area">
			<input v-model="inputMessage" class="message-input" placeholder="请输入消息..." @keyup.enter="sendMessage" />
			<button class="send-btn" @click="sendMessage">发送</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref,
		watch,
		nextTick
	} from 'vue';

	// 消息列表 - 使用 reactive
	const messages = reactive([{
			content: "你好！",
			time: "09:30",
			isMe: false
		},
		{
			content: "你好，有什么事吗？",
			time: "09:31",
			isMe: true
		},
		{
			content: "想问问你昨天的会议内容",
			time: "09:32",
			isMe: false
		}
	]);

	// 输入框内容
	const inputMessage = ref('');

	// 滚动位置控制

	//当前滚动位置
	const scrollTop = ref(0);
	// 聊天区域的总高度/
	const scrollHeight = ref(0);

	// 发送消息
	const sendMessage = () => {
		if (!inputMessage.value.trim()) return;

		// 获取当前时间
		const now = new Date();
		const timeStr =
			`${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;

		// 添加消息到列表 - 直接操作 reactive 数组，不需要 .value
		messages.push({
			content: inputMessage.value,
			time: timeStr,
			isMe: true
		});

		// 清空输入框
		inputMessage.value = '';

		// 自动滚动到底部
		scrollToBottom();

		// 模拟对方回复
		if (messages.length % 2 === 0) {
			setTimeout(() => {
				const replyNow = new Date();
				const replyTime =
					`${replyNow.getHours().toString().padStart(2, '0')}:${replyNow.getMinutes().toString().padStart(2, '0')}`;

				messages.push({
					content: "我收到了，稍后回复你详细内容",
					time: replyTime,
					isMe: false
				});


				scrollToBottom();
			}, 1000);
		}
	};

	// 滚动到底部的函数
	const scrollToBottom = () => {
		// 添加新消息时，Vue 需要时间重新渲染 DOM，如果不等待渲染完成就滚动，可能无法滚动到正确位置/
		nextTick(() => {
			setTimeout(() => {
				//scrollTop = scrollHeight：滚动到最底部
				//+ 100：额外偏移量，确保确实滚动到底部（解决可能的计算误差）
				scrollTop.value = scrollHeight.value + 100; // 加一个偏移量确保到底部
			}, 50);
		});
	};

	// 监听滚动事件更新高度
	const onScroll = (e) => {
		scrollHeight.value = e.detail.scrollHeight;
	};

	// 初始滚动到底部
	watch(messages, () => {
		scrollToBottom();
	}, {
		immediate: true
	});
</script>

<style lang="scss" scoped>
	.chat-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.chat-messages {
		flex: 1;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.message-item {
		display: flex;
		margin-bottom: 30rpx;
		max-width: 100%;

		&.other-message {
			align-items: flex-start;
		}

		&.my-message {
			flex-direction: row-reverse;
			align-items: flex-start;
		}
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin: 0 20rpx;
	}

	.message-content {
		display: flex;
		flex-direction: column;
		max-width: 70%;
	}

	.message-bubble {
		padding: 20rpx 25rpx;
		border-radius: 20rpx;
		word-wrap: break-word;
		font-size: 28rpx;
		line-height: 1.5;
	}

	.other-message .message-bubble {
		background-color: #ffffff;
		border-top-left-radius: 5rpx;
		box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
	}

	.my-message .message-bubble {
		background-color: #95ec69;
		border-top-right-radius: 5rpx;
		box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
	}

	.message-time {
		font-size: 20rpx;
		color: #999;
		margin-top: 8rpx;
		align-self: flex-end;
		padding: 0 20rpx;
	}

	.input-area {

		width: 100%;
		display: flex;
		padding: 20rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		position: fixed;
		bottom: 0;
		z-index: 999;

	}

	.message-input {
		flex: 1;
		height: 80rpx;
		border: 1rpx solid #ddd;
		border-radius: 40rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.send-btn {
		width: 140rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 20rpx;
		background-color: #07c160;
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
		padding: 0;
	}
</style>